<template>
	<view class="hide">
		<view class="card">
			<!-- <view
        class="view"
        v-for="(item, index) in dataList"
        :key="index"
        @click="select = index"
      >
        <image :src="select === index ? aa : bb" mode=""></image>
		<up-radio activeColor="red" label="item.title"></up-radio>
        <text>{{ item.title }}</text>
      </view> -->

			<radio-group @change="radioChange">
				<label v-for="(item, index) in dataList" :key="item.value">
					<view
						style="display: flex;align-items: center; padding: 30rpx; 0; border-bottom: 1rpx solid rgb(235,228,228);">
						<radio style="transform: scale(0.7)" :value="item.value" :checked="index === select"
							activeBackgroundColor="#1dd39b" />
						<view style="font-size: 28rpx">{{ item.title }}</view>
					</view>
				</label>
			</radio-group>

			<view class="textarea">
				<textarea placeholder="请输入其它原因" placeholder-class="place" v-model="cancel_reason"></textarea>
			</view>
		</view>
		<view class="tips">
			温馨提示
			<text>
				1.技师未接单全额退款，资金原路返回，预计2-3个工作日到账；<br />
				2.技师已接单出发，车费不予退还；<br />
				3.技师已到达，因客户原因提前终止服务的，除车费外还需扣除项目费的50%；<br />
				4.技师已开始服务后，客户不可以取消订单。</text>
		</view>
		<view class="btn" @click="submit"> 提交 </view>
	</view>
</template>

<script>
	// import aa from "@/static/image/1.png";
	// import bb from "@/static/image/0.png";
	import {
		HUAWEI
	} from "@/utils/enum.js";
	export default {
		data() {
			return {
				HUAWEI,
				dataList: [{
						value: 0,
						title: "临时有事",
					},
					{
						value: 1,
						title: "地址信息填写有误",
					},
					{
						value: 2,
						title: "技师未按时服务",
					},
					{
						value: 3,
						title: "其他",
					},
				],
				select: 0,
				cancel_reason: "",
				order_sn: ""
			};
		},
		onLoad(options) {
			this.order_sn = options.order_sn;
		},
		methods: {
			radioChange(evt) {
				// console.log('---');
				this.select = evt.detail.value;
			},
			submit() {
				if (this.select === null) {
					uni.showToast({
						icon: "none",
						title: "请选择取消原因",
					});
					return;
				}

				if (this.select === 3 && !this.cancel_reason) {
					uni.showToast({
						icon: "none",
						title: "请输入取消原因",
					});
					return;
				}

				uni.showModal({
					content: "是否确认取消订单？如果技师已经接单，会扣除一定费用",
					success: (res) => {
						if (res.confirm) {
							this.$http
								.post("api/order/cancelOrder", {
									order_sn: this.order_sn,
								})
								.then((res) => {
									this.confirmCancel();
								});
						}
					},
				});
			},
			confirmCancel() {
				this.$http
					.post("api/order/confirmCancel", {
						order_sn: this.order_sn,
						cancel_reason: this.select === 3 ?
							this.cancel_reason :
							this.dataList[this.select].title,
					})
					.then((res) => {
						const license = uni.getStorageSync("app-license");
						console.log('res===>>>', res);
						uni.showToast({
							icon: "none",
							duration: 2000,
							title: res.msg,
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 2000);
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.hide {
		padding: 20rpx 30rpx;
		.card {
			padding: 0 30rpx 33rpx;
			background-color: white;
			border-radius: 28rpx;
			.view {
				height: 104rpx;
				border-bottom: 2rpx solid rgba(245, 245, 245, 1);
				display: flex;
				align-items: center;
				color: #333333;
				font-size: 28rpx;
				image {
					width: 38rpx;
					height: 38rpx;
					margin-right: 12rpx;
				}
			}
			.textarea {
				padding: 20rpx;
				background-color: #f1f1f1;
				border-radius: 8rpx;
				height: 232rpx;

				textarea {
					height: 232rpx;
					font-size: 28rpx;
				}
			}
			.place {
				color: #a5a5a5;
				font-size: 28rpx;
			}
		}
		.tips {
			color: #333333;
			font-size: 28rpx;
			line-height: 40rpx;
			display: flex;
			flex-direction: column;
			margin-top: 40rpx;

			text {
				font-size: 26rpx;
			}
		}
		.btn {
			height: 86rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 36rpx;
			border-radius: 20rpx;
			margin-top: 120rpx;
			background-color: #1dd39b;
		}
	}
</style>